<script setup lang="ts">
import { ref } from "vue";

const getItemStyle = (index) => {
  if (index === 0) {
    return {
      color: "#F93E3E",
    };
  } else if (index === 1) {
    return {
      color: "#FB7D08",
    };
  } else if (index === 2) {
    return {
      color: "#FCA626",
    };
  } else {
    return {
      color: "#9195A3",
    };
  }
};

const tabs = ref([
  {
    name: "精华",
  },
  {
    name: "热门",
  },
  {
    name: "最新发布",
  },
]);

const activeIndex = ref(0); // 默认激活第一个Tab

const functionClick = (index) => {
  activeIndex.value = index;
};
</script>

<template>
  <div
    class="container m-top-20"
    style="
      display: flex;
      justify-content: space-between;
      margin: 10px auto 20px;
    "
  >
    <!-- 智慧谷资讯 -->
    <div>
      <!-- 智慧谷资讯 -->
      <div style="width: 236px; height: 200px; background-color: #fff">
        <div
          style="
            color: #000000;
            font-weight: Bold;
            padding: 13px 0 12px 21px;
            border-bottom: 1px solid #e5e5e5;
          "
        >
          智慧谷资讯
        </div>
        <div
          style="
            display: flex;
            flex-direction: column;
            padding: 10px 21px 0 21px;
          "
        >
          <a
            href="javascript:;"
            style="margin-bottom: 8px; width: fit-content"
            v-for="(item, index) in 5"
            :key="index"
            ><span :style="getItemStyle(index)">{{ index + 1 }}</span>
            <span style="margin-left: 10px">Arduino</span>
          </a>
        </div>
      </div>
      <!-- 加入创客星球 -->
      <div style="width: 236px; margin-top: 10px; background-color: #fff">
        <div
          style="
            color: #000000;
            font-weight: Bold;
            padding: 13px 0 12px 21px;
            border-bottom: 1px solid #e5e5e5;
          "
        >
          加入创客星球
        </div>
        <div class="outer-box" style="">
          <div v-for="i in 5" class="inner-item">
            <img
              src="@/assets/images/Community/chuangke_one.png"
              alt=""
              style="width: 60px"
            />
            <div>创作达人</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 精华、热门、最新发布 -->
    <div style="background-color: #fff; width: 589px">
      <ul
        style="
          background-color: #fff;
          border-bottom: 1px solid #e5e5e5;
          padding: 10px 0 0;
          display: flex;
        "
      >
        <li
          v-for="(item, index) in tabs"
          :key="index"
          :class="{ 'active-tab': activeIndex === index }"
          @click="functionClick(index)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div>
        <div
          v-for="i in 4"
          style="padding: 20px 18px 10px 18px; border-bottom: 1px solid #f6f6f6"
        >
          <div style="font-weight: bold">行空板K10一-WLED控灯(新年快乐)</div>
          <div style="font-size: 12px; margin: 6px 0; color: #999999">
            为帮助老师们有效实施和开展信息科技课程、蘑菇云基于中小学信息科技课程标准，开发了一款多功...
          </div>
          <div style="display: flex; justify-content: space-between">
            <img
              src="@/assets/images/Community/jinghua_one.png"
              alt=""
              style="width: 130px; height: 88px"
              v-for="i in 4"
            />
          </div>
          <div style="display: flex; margin-top: 10px">
            <div style="display: flex">
              <img
                src="@/assets/images/Community/touxiang.png"
                alt=""
                style="width: 20px; height: 20px"
              />
              <span style="margin-left: 10px">SSY · 58分钟前</span>
            </div>
            <div style="display: flex; margin-left: 24px; align-items: center">
              <img
                src="@/assets/images/Community/liulan.png"
                alt=""
                style="width: 16px; height: 16px"
              />
              <span style="margin-left: 10px">浏览量18</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 造型指南 -->
    <div style="width: 380px">
      <img
        src="@/assets/images/Community/zaoxing.png"
        alt=""
        style="width: 100%"
      />
      <div style="padding: 21px 21px 21px 21px; background-color: #fff">
        <div
          v-for="i in 12"
          style="font-size: 14px; color: #666666; margin-bottom: 10px"
        >
          FireBeetle系列产品选型指南
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
li {
  margin: 0 30px;
  cursor: pointer;
}
.active-tab {
  color: $xtxColor;
  border-bottom: 1px solid $xtxColor;
  padding-bottom: 7px;
}

/*重点是下面几行样式*/

.outer-box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 19px 19px 3px 19px;
  .inner-item {
    width: calc(100% / 3);
    text-align: center;
    margin-bottom: 16px;
  }
}
.outer-box .inner-item:nth-of-type(4n + 0) {
  margin-right: 0;
}
</style>
